<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="content">
        <el-card class="box-card">
          <page-tools>
            <template #after>
              <el-button
                type="success"
                class="btn"
                size="small"
                icon="el-icon-edit"
                @click="$router.push('/questions/new')"
              >新增试题</el-button>
            </template>
          </page-tools>
          <el-form class="form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="学科">
                  <el-select
                    @change="subjectchange"
                    v-model="select.subjectID"
                    style="width: 100%;"
                    placeholder="请选择活动区域"
                  >
                    <el-option
                      v-for="item in subject"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录">
                  <el-select
                    v-model="select.towsubjectID"
                    style="width: 100%;"
                    placeholder="请选择活动区域"
                  >
                    <el-option
                      v-for="item in towsubject"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签">
                  <el-select v-model="select.tags" style="width: 100%;" placeholder="请选择活动区域">
                    <el-option
                      v-for="item in tags"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字">
                  <el-input v-model="select.keyword"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="试题类型">
                  <el-select
                    v-model="select.questionType"
                    style="width: 100%;"
                    placeholder="请选择活动区域"
                  >
                    <el-option label="单选" value="单选"></el-option>
                    <el-option label="多选" value="多选"></el-option>
                    <el-option label="简答" value="简答"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度">
                  <el-select v-model="select.difficulty" style="width: 100%;" placeholder="请选择活动区域">
                    <el-option label="简单" value="简单"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="困难" value="困难"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向">
                  <el-select v-model="select.direction" style="width: 100%;" placeholder="请选择活动区域">
                    <el-option label="o2o" value="o2o"></el-option>
                    <el-option label="外包服务" value="外包服务"></el-option>
                    <el-option label="企业服务" value="企业服务"></el-option>
                    <el-option label="互联网金融" value="互联网金融"></el-option>
                    <el-option label="企业咨询" value="企业咨询"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人">
                  <el-select v-model="select.creatorID" style="width: 100%;" placeholder="请选择活动区域">
                    <el-option
                      v-for="item in people"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称">
                  <el-input></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-select
                    @change="cityschange"
                    v-model="select.provinces"
                    style="width: 50%;"
                    placeholder="请选择活动区域"
                  >
                    <el-option
                      v-for="(item, index) in provinces"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>

                  <el-select v-model="select.citys" style="width: 50%;" placeholder="请选择活动区域">
                    <el-option
                      v-for="(item, index) in citys"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-row type="flex" justify="center">
                  <el-col :offset="6">
                    <el-button plain size="medium" @click="searchclear">清除</el-button>
                    <el-button plain type="primary" size="medium" @click="getsearch">搜索</el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
          <el-row class="massage">
            <el-alert type="info" style="line-height:10px" :closable="false">
              <template>
                <i class="el-icon-info">共 {{ total }} 条记录</i>
              </template>
            </el-alert>
          </el-row>
          <el-row>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="id" label="#" width="80"></el-table-column>
              <!-- <el-table-column type="index" label="#" width="180"> </el-table-column> -->
              <el-table-column prop="subject" label="学科"></el-table-column>
              <el-table-column prop="catalog" label="目录"></el-table-column>
              <el-table-column prop="questionType" label="题型">
                <template v-slot="{ row }">
                  <span>{{ row.questionType === 1 ? '多选' : '单选' }}</span>
                </template>
              </el-table-column>
              <el-table-column width="180" prop="question" label="题干">
                <template v-slot="{ row }">
                  <span v-html="row.question"></span>
                </template>
              </el-table-column>
              <el-table-column width="200" align="center" label="录入时间">
                <template v-slot="{ row }">{{ dayjs(row.addDate).format('YYYY-MM-DD') }}</template>
              </el-table-column>
              <el-table-column prop="difficulty" label="难度">
                <template v-slot="{ row }">
                  <span>{{ row.difficulty === 1 ? '简单' : '困难' }}</span>
                </template>
              </el-table-column>
              <el-table-column width="120" prop="creator" label="录入人"></el-table-column>
              <el-table-column align="center" label="操作" width="380">
                <template v-slot="{ row }">
                  <el-button
                    plain
                    type="primary"
                    icon="el-icon-view"
                    circle
                    @click="viewtitle(row.id)"
                  ></el-button>
                  <el-button
                    plain
                    type="success"
                    icon="el-icon-edit"
                    circle
                    @click="edittitle(row)"
                  ></el-button>
                  <el-button
                    plain
                    type="Danger"
                    icon="el-icon-delete"
                    circle
                    @click="deldetails(row.id)"
                  ></el-button>
                  <el-button
                    plain
                    type="warning"
                    icon="el-icon-check"
                    circle
                    @click="addselected(row.id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <!-- 分页 -->
          <el-row class="massage">
            <el-col :span="15">&nbsp;</el-col>
            <el-col :span="8">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.page"
                :page-sizes="[5, 10, 15]"
                :page-size="page.pagesize"
                layout=" prev, pager, next, sizes, jumper"
                :total="total"
              ></el-pagination>
            </el-col>
          </el-row>
          <!-- 添加弹出层 -->
          <el-dialog
            :title="text"
            :visible.sync="dialogVisible"
            width="70%"
            round
            :before-close="handleClose"
          >
            <el-form label-width="120px">
              <el-form-item label="用户名">
                <el-input v-model="formData.account"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="formData.email"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="formData.password"></el-input>
              </el-form-item>
              <el-form-item label="角色">
                <el-input v-model="formData.role"></el-input>
              </el-form-item>
              <el-form-item label="权限组名称">
                <el-select
                  v-model="formData.permission_group_id"
                  style="width:100%;"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="1"></el-option>
                  <el-option label="区域二" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="formData.mobile"></el-input>
              </el-form-item>
              <el-form-item label="介绍">
                <el-input type="textarea"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary">立即创建</el-button>
                <el-button @click="handleClose">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-card>
        <!-- 查看本行详情弹窗组件 -->
        <viewpost v-if="showdetails" v-model="showdetails" :id="id"></viewpost>
      </div>
    </div>
  </div>
</template>

<script>
import { getlist, deldetails, addselected, getsubject, gettags, getdirectorys, getpeople } from '@/api/questions/list.js'
import viewpost from './viewpost.vue'
import { provinces, citys } from '@/assets/citys.js'
export default {
  components: {
    viewpost
  },
  data() {
    return {
      showdetails: false,
      tableData: [],
      page: {
        page: 1,
        pagesize: 10
      },
      currentPage4: '3',
      dialogVisible: false,
      text: '创建用户',
      formData: {},
      subject: [],
      towsubject: [],
      tags: [],
      people: [],
      select: {
        subjectID: '',
        towsubjectID: '',
        tags: '',
        creatorID: '',
        provinces: '',
        citys: '',
        direction: '',
        difficulty: '',
        questionType: '',
        keyword: ''
      },
      provinces: [],
      citys: [],
      total: 0
    }
  },
  created() {
    this.getlist()
    this.getsubject()
    this.getpeople()
  },
  methods: {
    async getsearch() {
      const res = { ...this.page, ...this.select }
      const { data } = await getlist(res)
      console.log(data)
      this.total = data.counts
      this.tableData = data.items
    },
    searchclear() {
      this.select.subjectID = ''
      this.select.towsubjectID = ''
      this.select.tags = ''
      this.select.creatorID = ''
      this.select.provinces = ''
      this.select.citys = ''
      this.select.direction = ''
      this.select.difficulty = ''
      this.select.questionType = ''
      this.select.keyword = ''
      this.citys = []
      this.getlist()
    },
    cityschange() {
      this.citys = citys(this.select.provinces)
    },
    async getpeople() {
      const { data } = await getpeople()
      this.people = data
      this.provinces = await provinces()
    },
    // 学科下拉框改变，发送二级和标签请求
    async subjectchange() {
      this.tags = []
      this.select.tags = ''
      const { data } = await gettags(this.select.subjectID)
      this.tags = data
      this.getdirectorys()
    },
    async getdirectorys() {
      this.towsubject = []
      this.select.towsubjectID = ''
      const { data } = await getdirectorys(this.select.subjectID)
      this.towsubject = data
    },
    // 下拉框
    async getsubject() {
      const { data } = await getsubject()
      console.log(data)
      this.subject = data
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      this.getlist()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.page = val
      this.getlist()
    },
    handleClose() {
      this.dialogVisible = false
    },
    async getlist() {
      const { data } = await getlist(this.page)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    viewtitle(id) {
      this.showdetails = true
      this.id = id
    },
    deldetails(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deldetails(id)
        this.$message.success('删除成功!')
        this.getlist()
      })
    },
    async addselected(id) {
      await addselected(id)
      this.$message.success('添加成功!')
      this.getlist()
    },
    edittitle(row) {
      // this.$router.push({ path: '/new', params: row.id })
      this.$router.push(`/questions/new/${row.id}`)
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
